<template>
  <div class="home-header">
    <div class="container">
      <router-link :to="{name: 'chooseCity'}">
        <div class="city middle-flex">{{city}}</div>
      </router-link>
      <div @click="toSearch" class="search-box center-flex">
        <img src="./images/search_icon.png" class="search-icon">
        <div class="input-placeholder">请输入酒店名或宴会厅名字</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    city: {
      type: String,
      default: '定位中...'
    },
    num: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    toSearch() {
      this.$router.push({
        name: 'search'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-header {
  background-color: #eb1032;
  box-shadow: 0rem 0.05rem 0.16rem 0 rgba(142, 142, 142, 0.1);
  height: 0.8rem;
}
</style>

<style lang="scss" scoped>
$main-color: #ffffff;
.container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.city {
  font-size: 0.3rem;
  color: $main-color;
  min-width: 0.12rem;
  &::after {
    content: '';
    display: block;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    border-top: 0.08rem solid $main-color;
    border-left: 0.06rem solid transparent;
    border-right: 0.06rem solid transparent;
  }
}

.search-box {
  width: 5.1rem;
  height: 0.62rem;
  background: #f8f8fa;
  border-radius: 0.31rem;
  .search-input {
    width: 100%;
    height: 100%;
  }
  .search-icon {
    width: 0.25rem;
    height: 0.25rem;
    margin-right: 0.14rem;
  }
}
</style>

